<template>
	<view class="wrap">
		<view class="pic">
			<u-avatar :src="item.uid.pic" size="60" ></u-avatar>
		</view>
		<view class="content" @click="itemClick(item._id)">
			<view class="header">
				<Tag :text="item.catalog" :type="tagType" plain="plain_"></Tag>
				<text class="header_title u-line-1">{{item.title}}</text>
				<Tag :text="item.tag" v-if="item.tag" type="warning"></Tag>
			</view>
			<view class="info">
				<text class="info_name u-line-1">{{item.uid.nickname}}</text>
				<Tag class="info_vip" :text="'VIP'+item.uid.isVip" v-if="item.uid.isVip !== '0'" type="error"></Tag>
				<text class="info_created">{{item.created|moment}}</text>
				<text class="info_read">{{'&#xe672; '+item.reads}}</text>
				<text class="info_answer">{{'&#xe663; '+item.answer}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Tag from '@/components/Tag/Tag'
	import moment from 'dayjs'
	import 'moment/locale/zh-cn' 
	import {mixin} from '@/common/mixin/index.js'
	export default {
		mixins:[mixin],
		components:{
			Tag
		},
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		computed:{
			tagType () {
			  let tagType = ''
			  switch (this.item.catalog) {
			    case '分享':
			      tagType = 'success'
			      break
			    case '提问':
			      tagType = 'warning'
			      break
			    case '公告':
			      tagType = 'error'
			      break
			  }
			  return tagType
			}
		},
		methods:{
			itemClick(id) {
				uni.navigateTo({
					url:`/subcom-home/PostDetail/PostDetail?tid=${id}`
				})
			}
		},
		filters: {
			moment (date) {
				if (moment(date).isBefore(moment().subtract(7, 'days'))) {
					return moment(date).format('YYYY-MM-DD')
				} else {
					return moment(date).format('YYYY-MM-DD')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	/* #ifdef APP-NVUE */
	width: 710rpx;
	/* #endif */
	/* #ifdef H5||MP-WEIXIN */
	width:100%;
	/* #endif */
	height: 200rpx;
	border-radius: 20rpx;
	background-color: rgba(31, 182, 131, 0.05);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.pic{
	width: 140rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.content{
	flex: 1;
	height: 200rpx;
	padding: 0 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.header{
	display: flex;
	flex-direction: row;
	height: 80rpx;
	justify-content: flex-start;
	align-items: center;
	&_title{
		flex: 1;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin: 0 20rpx;
		overflow: hidden;
	}
}
.info{
	display: flex;
	flex-direction: row;
	height: 80rpx;
	justify-content: flex-start;
	align-items: center;
	&_name,&_vip,&_created,&_read,&_answer{
		margin-right:10rpx;
		font-size: 24rpx;
		font-family: iconfont;
	}
}
</style>
